<div class="users-form">
  <form nz-form [formGroup]="userForm" role="form">

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>邮箱</nz-form-label>
      <nz-form-control nzSpan="18" [nzValidateStatus]="msgFlag" nzHasFeedback>
        <input type="text" nz-input nzSize="default" formControlName="email" placeholder="邮箱" (blur)="isEmailRepeat()">
        <nz-form-explain *ngIf="msgFlag === 'error'">
          <span class="text-danger">
            邮箱重复!
          </span>
        </nz-form-explain>
        <nz-form-explain *ngIf="!(userForm.get('email').valid || userForm.get('email').untouched)">
          <span class="text-danger" *ngIf="userForm.get('email').hasError('required')">带*项不能为空!</span>
          <span class="text-danger" *ngIf="userForm.get('email').hasError('email')">邮箱格式不正确！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>名字</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="lastName" placeholder="名字">
        <nz-form-explain *ngIf="!(userForm.get('lastName').valid || userForm.get('lastName').untouched)">
          <span class="text-danger" *ngIf="userForm.get('lastName').hasError('required')">带*项不能为空!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>姓氏</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="firstName" placeholder="姓氏" autocomplete="off">
        <nz-form-explain *ngIf="!(userForm.get('firstName').valid || userForm.get('firstName').untouched)">
          <span class="text-danger" *ngIf="userForm.get('firstName').hasError('required')">带*项不能为空!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <div nz-row nzGutter="16">
      <div nz-col nzSpan="12">
        <nz-form-label for="group" class="modal-box-label" nzRequired>所属小组</nz-form-label>
        <nz-select style="width: 100%" formControlName="groupUuid" nzSize="default" class="modal-box-form">
          <nz-option *ngFor="let group of groupList" [nzValue]="group.groupUuid" [nzLabel]="group.groupName">
          </nz-option>
        </nz-select>
        <div *ngIf="!(userForm.get('groupUuid').valid || userForm.get('groupUuid').untouched)">
          <span class="text-danger" *ngIf="userForm.get('groupUuid').hasError('required')">
            带*项不能为空!
          </span>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-label for="group" class="modal-box-label" nzRequired>角色</nz-form-label>
        <nz-select style="width: 100%" formControlName="roleUuid" nzSize="default" class="modal-box-form">
          <nz-option *ngFor="let role of roleGroup" [nzValue]="role.roleUuid" [nzLabel]="role.roleName">
          </nz-option>
        </nz-select>
        <div *ngIf="!(userForm.get('roleUuid').valid || userForm.get('roleUuid').untouched)">
          <span class="text-danger" *ngIf="userForm.get('roleUuid').hasError('required')">
            带*项不能为空!
          </span>
        </div>
      </div>
    </div>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>密码创建方式</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-select nzPlaceHolder="选择创建方式" formControlName="passwordCreationMode" class="form-select"
          [(ngModel)]="defaultValue">
          <nz-option nzCustomContent nzLabel="手动设置密码" nzValue="0">手动设置密码</nz-option>
          <nz-option nzCustomContent nzLabel="发送邮件激活" nzValue="1">发送邮件激活</nz-option>
          <nz-option nzCustomContent nzLabel="LDAP模式" nzValue="2">LDAP模式</nz-option>
        </nz-select>
      </nz-form-control>
      <div *ngIf="userForm.get('passwordCreationMode').value === '2'" style="color: blanchedalmond">
        - 需要管理员正确配置相关的LDAP服务器，否则无法正常登录
      </div>
    </nz-form-item>

    <div *ngIf="userForm.controls.passwordCreationMode.value ==='2'">
      <nz-form-item>
        <nz-form-label nzFor="" nzSpan="6" nzRequired>LDAP用户名</nz-form-label>
        <nz-form-control nzSpan="18">
          <input type="text" nz-input nzSize="default" formControlName="ldapName" autocomplete="new-password"
            placeholder="请输入LDAP用户名">
          <nz-form-explain *ngIf="!(userForm.get('ldapName').valid || userForm.get('ldapName').untouched)">
            <span class="text-danger" *ngIf="userForm.get('ldapName').hasError('required')">
              带*项不能为空!
            </span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div *ngIf="userForm.controls.passwordCreationMode.value ==='0'">
      <nz-form-item>
        <nz-form-label nzFor="" nzSpan="6" nzRequired>新密码</nz-form-label>
        <nz-form-control nzSpan="18">
          <input type="password" nz-input nzSize="default" formControlName="newPassword" autocomplete="new-password"
            placeholder="请输入密码">
          <nz-form-explain *ngIf="!(userForm.get('newPassword').valid || userForm.get('newPassword').untouched)">
            <span class="text-danger" *ngIf="userForm.get('newPassword').hasError('required')">
              带*项不能为空!
            </span>
            <span class="text-danger" *ngIf="!userForm.get('newPassword').hasError('minLength') || !userForm.get('newPassword').hasError('maxLength')">
              密码长度8~12位
            </span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="" nzSpan="6" nzRequired>确认密码</nz-form-label>
        <nz-form-control nzSpan="18">
          <input type="password" nz-input nzSize="default" formControlName="confirmPwd" autocomplete="off"
            placeholder="请确认密码" (blur)="pwdRepeate()">
          <nz-form-explain *ngIf="!(userForm.get('confirmPwd').valid || userForm.get('confirmPwd').untouched)">
            <span class="text-danger" *ngIf="userForm.get('confirmPwd').hasError('required')">带*项不能为空!</span>
            <div *ngIf="pwdRepeate">
              <span class="text-danger">两次密码不匹配</span>
            </div>
          </nz-form-explain>

        </nz-form-control>
      </nz-form-item>
    </div>

    <nz-form-item>
      <nz-form-control class="modal-footer">
        <button nz-button nzType="primary" class="modal-footer-btn"
          (click)="saveUser()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
        <button nz-button nzType="primary" class="modal-footer-btn" nzGhost="true"
          (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>